<!DOCTYPE html>
<html>
<head>
    <title>t1</title>
    <style type="text/css">
        canvas#t1 {
            position: relative;
            border: 1px solid #b1b1b1 ;
            box-sizing: border-box;
        }
        canvas#t2 {
            position: relative;
            border: 1px solid #ccc ;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<canvas width="200" height="200" id="t1"></canvas>
<canvas width="200" height="200" id="t2"></canvas>
</body>
<footer>
    <script type="text/javascript">
        var myCanvas1 = document.getElementById('t1') ;
        var ctx1 = myCanvas1.getContext('2d') ;
        ctx1.moveTo(100, 100) ;
        ctx1.lineTo(200, 200) ;
        ctx1.stroke() ;
    </script>
    <script type="text/javascript">
        var myCanvas2 = document.getElementById('t2') ;
        var ctx2 = myCanvas2.getContext('2d') ;

        ctx2.moveTo(0, 0) ;
        ctx2.lineTo(200, 100) ;
        ctx2.strokeStyle = 'blue' ;
        ctx2.lineWidth = 10 ;
        ctx2.stroke() ;
        ctx2.beginPath() ;
        ctx2.moveTo(0, 100) ;
        ctx2.lineTo(200, 200) ;
        ctx2.strokeStyle = '#b1b1b1' ;
        ctx2.lineWidth = 1 ;
        ctx2.stroke() ;
    </script>
</footer>
</html>